<template>
  <div class="input-content">
    <el-input
      class="msg-input"
      type="textarea"
      autofocus
      v-model="inputMsg"
      :autosize="{ minRows: 1, maxRows: 4 }"
      :disabled="isSending"
      :placeholder="isSending ? '消息发送中' : '来聊点什么吧~'"
    />
    <el-button class="icon-send" @click="send"></el-button>
  </div>

</template>

<script setup lang="ts">
import type { Ref } from "vue";
import { sendMessage } from "@/components/ChatBox/Hooks";
import { emitterEmit } from "@/mitt/mitt";

const isSending: Ref<boolean> = ref(false);
const inputMsg: Ref<string> = ref("");

// 发送消息
const send = () => {
  sendMessage(inputMsg.value);
  inputMsg.value = '';
}

</script>

<style scoped lang="less">
.input-content {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 32px;
  padding: 0 20px;
  margin-top: 10px;

  .el-button {
    width: 50px;
    height: 32px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left 13px top 6px;
    background-color: var(--color-primary);
    border-width: 0;

    &:focus {
      border-width: 0;
    }
  }

  .msg-input {
    margin-right: 8px;

    :deep(.el-textarea__inner) {
      box-sizing: border-box;
      padding: 5px 10px;
      font-size: 14px;
      line-height: 20px;
      color: var(--font-main);
      resize: none;
      background-color: var(--background-3);
      border: none;
      border-radius: 8px;
      box-shadow: none;
      transition: 0.2s;
      margin-right: 8px;
      min-height: 32px !important;

      &:focus {
        outline: 1px solid var(--hover-primary);
      }
    }
  }
}
</style>
